<!--
 * @Description:
 * @Author: william
 * @Date: 2025-03-03 11:18:45
 * @LastEditors: william
 * @LastEditTime: 2025-05-23 16:57:04
-->
<template>
  <div v-loading="loading" class="content-container">
    <el-row :gutter="10">
      <el-col
        v-for="item in appList"
        :key="item.i"
        :span="12"
        :xs="24"
        :md="12"
        :lg="8"
        :xl="6"
        style="margin-bottom: 10px"
      >
        <el-card shadow="always">
          <template #header>
            <div class="card-header">
              <div class="title">{{ item.appName }}</div>
              <div class="subTitle" style="font-weight: normal">
                {{ item.appTags }}
              </div>
            </div>
          </template>
          <div class="card-content">{{ item.appDesc }}</div>
          <template #footer>
            <el-button @click="handleViewDetail(item)">{{
              $t('public.viewDetail')
            }}</el-button>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
const { tenantAppList } = storeToRefs(usePermissionStore())
const loading = ref(false)
const appList = ref([])

onMounted(() => {
  console.log(tenantAppList.value)
  getTableList()
})

const getTableList = () => {
  loading.value = true
  appList.value = []
  g_api.userCenter
    .apiAppPageList({
      pageNum: 1,
      pageSize: 100,
      appName: '',
      startTime: '',
      endTime: ''
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        console.log(111, data)
        appList.value = data.items
      }
    })
    .finally(() => {
      loading.value = false
    })
}
const handleViewDetail = item => {
  const names = tenantAppList.value.find(list => {
    return list.key === item.appIdentifier
  })
  const checkRoute = g_router
    .getRoutes()
    .some(route => route.name === names.name)
  console.log('该路由是否存在-checkRoute', checkRoute, names)
  if (names) {
    g_router.push({
      name: names.name
    })
  } else {
    ElMessage.warning(g_t('apply.serviceNotAvailable'))
  }
}
</script>

<style lang="scss" scoped>
.content-container :deep(.el-card) {
  background-color: var(--card-bg-color);
  border-color: var(--card-border-color);
  .el-card__header {
    border-bottom-color: var(--card-border-color);
  }
  .el-card__footer {
    border-top-color: var(--card-border-color);
  }
}
.card-header {
  .title {
    font-size: 16px;
    font-weight: bold;
  }
  .subTitle {
    font-size: 14px;
    font-weight: normal;
    color: var(--color-666);
  }
}
.card-content {
  min-height: 57px;
  color: var(--color-333);
  @extend .multEllipsis;
}
</style>
